<template>
  <div class="applyforList">
    <SubtTitle
      name="专家列表"
      icon-name="operate"
      has-icon
      style="margin-bottom: 10px"
    ></SubtTitle>
    <Table :tableData="tableData"  :columnList="columnList"></Table>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted } from "vue";
import Table from "@/components/Table/table.vue";
import { getAll } from "@/api/index.js";
const tableData = ref([]);
const columnList = ref([
  { prop: "expertName", label: "姓名", width: 100 },
  { prop: "expertOffice", label: "科室", width: 260 },
  { prop: "expertOffice", label: "专长" },
  { prop: "expertHis", label: "所属医院", width: 300 },
  { prop: "expertIntro", label: "简介" },
]);
onMounted(() => {
  // 获取专家列表数据
  getAll().then((res) => {
    console.log(res, "res");
    tableData.value = res;
  });
});
</script>
<style scoped lang="scss">
@mixin bg() {
  padding: 10px;
  border-radius: 12px;
  background: rgba(33, 33, 33, 0.41);
  box-shadow: 0px 0px 10.2px 1px rgba(148, 148, 148, 0.13) inset;
  background: linear-gradient(
    112.04deg,
    rgba(67, 213, 199, 0.12) 1.24%,
    rgba(82, 80, 80, 0) 64.01%
  );
  border: 1px solid;
  border-image-source: linear-gradient(
    130.78deg,
    rgba(0, 0, 0, 0.1) 55.65%,
    rgba(67, 213, 199, 0.2) 94.34%
  );
}
:deep(.el-table__empty-text) {
  color: #fff;
}
</style>
